<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客注册页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_login.css">
    <script src="js/jquery.js"></script>
</head>
<body>
<!-- 导航栏 -->
<div class="nav">

    <!-- <img src="image/img1.jpg" alt="加载失败" > -->
    <img src="image/img1.jpg" alt="图片加载失败">
    <span class="title">筱的博客</span>

    <!-- 此标签用于占位 分隔 -->
    <div class="spacer"></div>
    <!--    <a href="blog_login.html">登录</a>-->

</div>

<!-- 登录页面容器 整个页面框-->
<!-- 通过此页面框 在其内部设计登录框 可以通过弹性布局让其水平垂直居中 -->
<!-- 如果直接弄登录框 那就得设计外边距等使其水平垂直对齐 -->
<div class="login-container">

    <!-- 登录指示 样式 页面里的登录框-->
    <div class="dialog" style="height: 450px ">
        <h2>新账号注册</h2>

        <div class="row">
            <span>
               <b>用户名</b>
            </span>
            <input type="text" id="username" placeholder="用户名长度最高6位">
        </div>

        <div class="row">
            <span>
                <b>密码</b>
            </span>
            <input type="password" id="password" placeholder="密码长度最低6位">
        </div>

        <div class="row">
            <span>
                <b>确认密码</b>
            </span>
            <input type="password" id="judgepassword" placeholder="在此输入确认密码">
        </div>

        <!-- <div class="judgemessage">验证码为右边5个数字相加结果:</div> -->
        <div class="row">
            <span>
                <b>邮箱地址</b>
            </span>
            <input type="text" id="email"placeholder="在此输入邮箱地址">
        </div>
        <div class="row">
            <span>
                <b>验证码</b>
            </span>


            <input type="text" id="judgetext" placeholder="邮箱验证码">

<!--            <img id="captchaimg" src="/home/captcha" style="cursor: pointer" title="验证码看不清？ 单击一下试试~">-->
            <button id="send">获取邮箱验证码</button>

        </div>
        <!-- 这里存放错误信息 -->
        <div class="error">

        </div>

        <div class="row">
            <button id="submit">注册</button>
        </div>

        <div class="mes">
            <div class="show">已经有账号?</div>
            <div class="attention">
                点击这里去登录
            </div>
        </div>

    </div>
</div>


<script>
    let username = document.querySelector("#username");
    let password = document.querySelector("#password")
    let judgepassword = document.querySelector('#judgepassword');

    let judgetext = document.querySelector('#judgetext');
    let error = document.querySelector('.error');

    error.innerHTML = '';

    let send_captcha=document.querySelector("#send");
    let email = document.querySelector("#email");
    send_captcha.onclick= function (){
        if (email.value.length < 12) {
            error.innerHTML = "非法邮箱地址!";
            return;
        }
        //  取消单击事件
        send_captcha.className="forbid";
        error.innerHTML = "正在尝试发送验证码给您邮件,请耐心等待...";
        $.ajax({
            url: "user/sendcaptcha",
            type: "post",
            data: {
                "eMail":email.value
            },
            success: function (body){
                //  恢复单击事件
                send_captcha.className="allow";
                    error.innerHTML = body.msg;
            }
        });
    }

    <!--    单击验证码图片 进行更新 ..-->
    // $("#captchaimg").click(function () {
    //     $(this).hide().attr('src', '/home/captcha?dt=' + new Date().getTime()).fadeIn();
    // });
    // let username = document.querySelector('#username');
    // let password = document.querySelector('#password');
    // jQuery 形式 通过id选择器 获取标签对应的js对象


    // 单击跳转到登录页面
    let attention = document.querySelector('.attention');
    attention.onclick = function () {
        location.assign("blog_login.html");
    }
    let submit_button = document.querySelector('#submit');

    submit_button.onclick = function () {
        if (
            // 前端进行参数校验 未填写即为''
            username.value == '' || password.value == '' || judgepassword.value == '' || judgetext.value == ''||email.value=='') {
            error.innerHTML = '当前还有信息为填写!';
            // $("#captchaimg").hide().attr('src', '/home/captcha?dt=' + new Date().getTime()).fadeIn();
        } else if (password.value != judgepassword.value) {
            judgepassword.focus();
            error.innerHTML = '密码和确认密码不一致!';
            // $("#captchaimg").hide().attr('src', '/home/captcha?dt=' + new Date().getTime()).fadeIn();
        } else if (username.value.length > 6) {
            username.focus();
            error.innerHTML = '用户名长度最高6位!';
            // $("#captchaimg").hide().attr('src', '/home/captcha?dt=' + new Date().getTime()).fadeIn();
        } else if (password.value.length < 6) {
            password.focus();
            error.innerHTML = '密码不能低于6位!';
            // $("#captchaimg").hide().attr('src', '/home/captcha?dt=' + new Date().getTime()).fadeIn();
        } else if (email.value.length < 10&&!email.value==='test') {
            email.focus();
            error.innerHTML="非法邮箱地址!";
        }else if(judgetext.value.length!=6){
            judgetext.focus();
            error.innerHTML="验证码错误!";
        }
        else {
            //  发送请求后 在响应前 禁止单击
            submit_button.className="forbid";
            error.innerHTML='请稍后,正在注册账号中...';
            let user = {
                // "username": username.value,
                // "password": password.value
                "username": username.value,
                "password": password.value,
                "captcha": judgetext.value,
                "email":email.value
            };

            $.ajax({
                url: 'user/reg',
                type: 'post',
                data: user,  //将传递的user内容 转换成json格式发给后端 (默认直接传是querystring格式) 后端可以直接用变量接受
                //data: {"username": username.val(),"password": password.val()}  // 也可以直接构造json格式字符串 传递 不同ajax传参


                success: function (body) {
                    // if(body.userId==0){
                    //     error.innerHTML='注册失败,当前用户名称已存在!!'
                    // }else if(body.userId==-1){
                    //     error.innerHTML='注册失败,用户名里不能带有空格!';
                    // }else if(body.userId==-2){
                    //     error.innerHTML='注册失败,检测到您已注册过账户';
                    // }
                    if (body != null && body.code == 200 && body.data == 1) {
                        // 状态码为200且 data返回的数据为1 即插入一条用户 显示注册成功 重定向到 登录页面
                        alert('恭喜您,成功注册新用户~');
                        location.assign('blog_login.html');
                    } else {
                        // 当状态码不是200 则注册失败 将后端返回的统一格式中的msg描述信息填充到error盒子内
                        error.innerHTML = body.msg;
                        // $("#captchaimg").hide().attr('src', '/home/captcha?dt=' + new Date().getTime()).fadeIn();
                    }
                    // 响应后恢复单击效果
                    submit_button.className="allow";
                }
            });
        }
    }

    // username.focus();

    // 键盘单击事件
    window.onkeydown=function(ev) {
        if (ev.keyCode == 13) {  // 当单击了回车按键  执行下面逻辑 跳转到 没有填写数据的框, 全部填写后 执行登录请求
            if (username.value == '') {
                username.focus();
            }
            if (username.value != '' && password.value == '') {
                password.focus();
            }

            if (username.value != '' && password.value != '' && judgepassword.value == '') {
                judgepassword.focus();
            }
            if (username.value != '' && password.value != '' && judgepassword.value != ''&&email.value =='') {
                email.focus();
            }
            if (username.value != '' && password.value != '' && judgepassword.value != ''&&email.value !=''&&judgetext.value == '') {
                judgetext.focus();
            }

            if (username.value != '' && password.value != '' && judgepassword.value != ''&&email.value !=''&&judgetext.value != '') {
                submit_button.onclick();
            }
        }
    }


</script>
</body>
</html>